<template>
  <div id="realTimeAlarm" class="clearfix">
    <div class="boxTable" style="display: inline-block">
      <div class="navTable">
        <el-table
          :data="tableData"
          stripe
          @row-click="getRowData"
          style="width: 100%">
          <el-table-column
            label=""
            width="30">
            <template slot-scope="scope">
              <i v-if="scope.row.event_level === '0' || scope.row.event_level === '-1'" class="circle" style="border: 5px solid #75cc4e;"></i>
              <i v-if="scope.row.event_level === '1'" class="circle" style="border: 5px solid #F43B42;"></i>
              <i v-if="scope.row.event_level === '2' || scope.row.event_level === '4' || scope.row.event_level === '9'" class="circle" style="border: 5px solid #FC8358;"></i>
              <i v-if="scope.row.event_level === '3' || scope.row.event_level === '5'" class="circle" style="border: 5px solid #F8CA00;"></i>
              <i v-if="scope.row.event_level === '6'" class="circle" style="border: 5px solid #4FBADB;"></i>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(column, index) in cols"
            :prop="column.prop"
            :label="column.label"
            :key="index"
            :show-overflow-tooltip="true"
            :width="column.width"
            :sortable="column.sortable"
            :sort-method = "sortByDate"
            >
          </el-table-column>
          <el-table-column
            label=""
            width="15">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="boxContent">
      <div class="boxContent">
        <div class="boxTitle">
          <h3>{{contentForm.content}}</h3>
          <div class="titleBtn" v-show="this.contentDetailShow === '未恢复'">
            <el-button class="topBtn" type="danger" @click="alarmClean">消除</el-button>
            <el-button class="topBtn" type="danger" @click="alarmConfirm">确认</el-button>
          </div>
          <div class="titleBtn" v-show="this.contentDetailShow === '已确认'">
            <el-button class="topBtn" type="danger" @click="alarmClean">消除</el-button>
          </div>
        </div>
        <div class="dataContent clearfix">
          <div class="contentLeft" v-show="contentShow">
            <div class="contentInfo1" >
              <el-row>
                <el-col :span="4" style="text-align: left">
                  <div class="grid-content bg-purple">
                    编号：
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content bg-purple">
                    <span>{{contentForm.station}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row v-show="false">
                <el-col :span="4" style="text-align: left">
                  <div class="grid-content bg-purple">
                    地址：
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content bg-purple">
                    <span>{{contentForm.addr}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" style="text-align: left">
                  <div class="grid-content bg-purple">
                    发生时间：
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content bg-purple">
                    <span>{{contentForm.time_alarm}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row  v-show="this.contentDetailShow === '已确认' || this.contentDetailShow === '已恢复'">
                <el-col :span="4" style="text-align: left">
                  <div class="grid-content bg-purple">
                    恢复时间：
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content bg-purple">
                    <span v-show="this.contentForm.time_recovery === ''">-</span>
                    <span v-show="this.contentForm.time_recovery !== ''">{{contentForm.time_recovery}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" style="text-align: left">
                  <div class="grid-content bg-purple">
                    类型：
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content bg-purple">
                    <span>{{contentForm.event_type}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" style="text-align: left">
                  <div class="grid-content bg-purple">
                    级别：
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content bg-purple">
                    <span>{{contentForm.event_level_label}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" style="text-align: left">
                  <div class="grid-content bg-purple">
                    机构：
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content bg-purple">
                    <span>{{contentForm.fittings_type}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" style="text-align: left">
                  <div class="grid-content bg-purple">
                    测点名称：
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content bg-purple">
                    <span>{{contentForm.attri}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" style="text-align: left">
                  <div class="grid-content bg-purple">
                    告警内容：
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content bg-purple">
                    <span>{{contentForm.content}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="4" style="text-align: left">
                  <div class="grid-content bg-purple">
                    智能图片：
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content bg-purple">
                    <img v-show="this.smartPicture !== ''" width="214px" :src="smartPicture">
                    <img v-show="this.smartPicture === ''" width="214px" :src="nonePicture">
                  </div>
                </el-col>
              </el-row>
              <el-row v-show="this.contentDetailShow === '已确认'">
                <el-col :span="4" style="text-align: left">
                  <div class="grid-content bg-purple">
                    确认时间：
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content bg-purple">
                    <span>{{contentForm.time_operate}}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row v-show="this.contentDetailShow === '已确认'">
                <el-col :span="4" style="text-align: left">
                  <div class="grid-content bg-purple">
                    确认人：
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content bg-purple">
                    <span>{{contentForm.confirm_person}}</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="contentRight">
            <div class="showImg">
              <img v-show="this.contentDetailShow === '未恢复'" :src="unrecovered">
              <img v-show="this.contentDetailShow === '已恢复'" :src="recovered">
              <img v-show="this.contentDetailShow === '已确认'" :src="confirm">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import unrecovered from '@/assets/messageCenter/unrecovered.png'
  import recovered from '@/assets/messageCenter/recovered.png'
  import confirm from '@/assets/messageCenter/confirm.png'
  import nonePicture from '@/assets/messageCenter/nonePicture.png'
  import axios from 'axios'
  import Axios from 'axios'

  export default {
    data() {
      return {
        unrecovered,
        recovered,
        confirm,
        nonePicture,
        // 列表
        tableData: [],
        contentForm: {},
        contentShow: false,
        contentDetailShow: '',
        smartPicture: '',
        cols: [
          { prop: 'station', label: '来源', width: '144px', sortable: true },
          { prop: 'content', label: '标题', width: '205px', sortable: true },
          { prop: 'event_type', label: '类型', width: '100px', sortable: true },
          { prop: 'time_alarm', label: '时间', width: '225px', sortable: true }
        ],
        // id获取
        neededID: '',
        // 告警消除接口
        cleanPort: {
          access_token: localStorage.getItem('access_token'),
          type: 'event_clear',
          data: {
            condition: {
              ids: []
            }
          }
        },
        // 告警确认接口
        confirmPort: {
          access_token: localStorage.getItem('access_token'),
          type: 'event_confirm',
          data: {
            condition: {
              ids: [],
              operate_content: ''
            }
          }
        },
        // 必要消息总览接口
        neededMessage: {
          access_token: localStorage.getItem('access_token'),
          type: 'event_get_condition',
          data: {
            condition: {
              pid: [],
              event_levels: ['1', '2', '3', '4']
            },
            page: {
              page_size: '0',
              page_number: '0'
            }
          }
        }
      }
    },
    mounted() {
      this.neededDataGet(),
      this.sortByDate()
    },
    methods: {
      sortByDate(obj1, obj2) {
        // console.log(obj1,1111)
      // let val1 = obj1.deadline
      // let val2 = obj2.deadline
      // return val1 - val2
    },

      // 告警确认
      alarmConfirm() {
        let oGive = []
        if (this.neededID !== '') {
          oGive.push(this.neededID)
        }
        this.confirmPort.data.condition.ids = oGive
        axios.post('/event', this.confirmPort, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          console.log(res)
          let oGiveId = this.neededID
          console.log(oGiveId)
          this.afterEventDataGet(oGiveId)
        })
          .catch((error) => {
            console.log(error)
          })
      },
      // 告警消除
      alarmClean() {
        let oGive = []
        if (this.neededID !== '') {
          oGive.push(this.neededID)
        }
        this.cleanPort.data.condition.ids = oGive
        axios.post('/event', this.cleanPort, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          console.log(res)
          this.neededDataGet()
          this.contentForm = {}
          this.contentDetailShow = ''
          this.contentShow = false
          this.$emit('cleanSuccess', 1)
        })
          .catch((error) => {
            console.log(error)
          })
      },
      // 初始化数据
      intData() {
        this.contentForm = {}
        this.contentDetailShow = ''
        this.contentShow = false
      },
      // 获取行数据
      getRowData(row) {
        console.log(row)
        let oID = row.id
        this.neededID = oID
        console.log(this.neededID)
        let oRow = row
        this.contentForm = oRow
        this.contentShow = true
        let oShowStr = ''
        if (row.time_recovery !== '') {
          oShowStr = '已恢复'
        }
        if (row.time_recovery === '' && row.time_operate !== '') {
          oShowStr = '已确认'
        }
        if (row.time_recovery === '' && row.time_operate === '') {
          oShowStr = '未恢复'
        }
        this.contentDetailShow = oShowStr
        // console.log(oShowStr)
        let oPicture = ''
        for (let i = 0; i < row.attachments.length; i++) {
          if (row.attachments !== []) {
            oPicture = Axios.defaults.baseURL + '/' + row.attachments[i].path
          } else if (row.attachments === []) {
            oPicture = ''
          }
        }
        this.smartPicture = ''
        console.log(oPicture)
        // console.log(this.smartPicture)
      },
      // 产生事件后获取行数据
      getAfterEventData(row) {
        console.log(row)
        let oRow = row
        this.contentForm = oRow
        this.contentShow = true
        let oShowStr = ''
        if (row.time_recovery !== '') {
          oShowStr = '已恢复'
        }
        if (row.time_recovery === '' && row.time_operate !== '') {
          oShowStr = '已确认'
        }
        if (row.time_recovery === '' && row.time_operate === '') {
          oShowStr = '未恢复'
        }
        this.contentDetailShow = oShowStr
        // console.log(oShowStr)
        let oPicture = ''
        for (let i = 0; i < row.attachments.length; i++) {
          if (row.attachments !== []) {
            oPicture = Axios.defaults.baseURL + '/' + row.attachments[i].path
          } else if (row.attachments === []) {
            oPicture = ''
          }
        }
        this.smartPicture = ''
        console.log(oPicture)
        // console.log(this.smartPicture)
      },
      // 列表总览
      neededDataGet() {
        axios.post('/event', this.neededMessage, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
         res.data.data.items.sort((a,b) => new Date(b.time_alarm).getTime() - new Date(a.time_alarm).getTime())
          // for(let i = 0; i < res.data.data.items.length -1; i++){
          //   for(var j = 0; j < res.data.data.items.length -1 - i; j++){
          //     if (new Date(res.data.data.items[j].time_alarm).getTime() < new Date(res.data.data.items[j+1].time_alarm).getTime()) {
          //       let temp = res.data.data.items[j]
          //       res.data.data.items[j]=res.data.data.items[j+1];
          //       res.data.data.items[j+1] = temp
          //     }
          //   }
          // }
          this.tableData = res.data.data.items
          // console.log(res)
        })
          .catch((error) => {
            console.log(error)
          })
      },
      // 事件执行后总览
      afterEventDataGet(val) {
        axios.post('/event', this.neededMessage, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.tableData = res.data.data.items
          console.log(res)
          console.log(val)
          let oNew = {}
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].id === val) {
              console.log(this.tableData[i])
              oNew = this.tableData[i]
              this.getAfterEventData(oNew)
            }
          }
        })
          .catch((error) => {
            console.log(error)
          })
      }
    }
  }
</script>

<style scoped>
  /*******初始化******/
  ul, li{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .clearfix:after{
    display: block;
    content: '';
    clear: both;
  }
  h3{
    width: 60%;
    float: left;
    padding:0 0 0 20px;
    margin: 0;
    line-height: 40px;
  }
  /*************最外层***************/
  #realTimeAlarm{
    min-width: 1700px;
    height: 100%;
    margin: 0 20px;
    color: #000;
    font-size: 14px;
    background-color: #fff;
  }
  /***********右边内容**********/
  .boxContent{
    width: 980px;
    height: 100%;
    float: right
  }
  .boxTitle{
    height: 40px;
    width: inherit;
    border-bottom: 1px solid #e0e0e0
  }
  .dataContent{
    width: inherit;
    min-height: 400px;
  }
  .contentLeft{
    width: 70%;
    float: left;
    padding: 20px 0 0 20px;
  }
  .contentRight{
    width: 30%;
    padding: 20px 20px 0 0;
    float: right;
  }
  .showImg{
    float: right;
  }
  .titleBtn{
    float: right;
    line-height: 40px;
    margin-right: 10px;
  }
  .topBtn{
    width: 60px;
    height: 24px;
    border-radius: 4px;
    /*background-color: #0072F3;*/
    /*color: #fff;*/
    /*outline: none;*/
    /*border: none;*/
  }
  /deep/ .el-button {
    padding: 5px 15px;
  }
  /deep/ .el-button + .el-button {
    margin-left: 6px;
  }
  /deep/ .el-row{
    padding-bottom: 20px;
  }
  /***********列表样式***********/
  .navTable{
    width: 720px;
    max-height: 840px;
    border-right: 1px solid #e0e0e0;
  }
  /deep/ thead > tr > th{
    padding: 8px 0;
    background: #fff;
    border-bottom: 1px solid #e0e0e0 !important;
    border-right: 1px solid #e0e0e0 !important;
  }
  /deep/ thead > tr > th:nth-child(6){
    padding: 8px 0;
    border-bottom: 1px solid #e0e0e0 !important;
    border-right: none !important;
  }
  /deep/ .el-table__body-wrapper {
    height: 800px;
    overflow-y: auto;
  }
  /deep/ .el-table td{
    height: 40px;
    padding: 0 0;
  }
  /deep/ .el-table .caret-wrapper{
    height: 22px;
  }
  /deep/ .el-table .sort-caret.ascending{
    top: 0;
  }
  /deep/ .el-table .sort-caret.descending{
    bottom: 0;
  }
  /deep/ .el-table::before{
    height: 0;
  }
  .circle{
    display: inline-block;
    height: 10px;
    /*width: 10px;*/
    border-radius: 50%;
  }
  /deep/ .el-table__body > tbody > tr {
    cursor: pointer;
  }
  /**************滚动条样式*******************/
  /deep/ .el-table__body-wrapper::-webkit-scrollbar {/*滚动条整体样式*/
    width: 14px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    /*border-radius: 5px;*/
    /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    background: #DDDDDD;
  }
  /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {/*滚动条里面轨道*/
    /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    border-radius: 0;
    background: #F5F5F5;
  }
</style>
